  <template>
  <div class="page f-r f-g">
    <el-row :gutter="16" style="width: 100%;height: 100%">
      <el-col :span="6">
        <div class="left-card">
          <div class="card-header f-r a-c j-b">
            <div class="card-title" style="font-size: 16px">算法管理</div>
            <el-upload :show-file-list="false">
              <el-button type="primary">批量上传</el-button>
            </el-upload>
          </div>
          <div class="card-body">
            <div class="file-list">
              <div class="file-item f-r a-c" v-for="item in fileList" :key="item.id">
                <div class="file-image">
                  <img :src="item.cover" alt="">
                  <div class="play-icon">
                    <el-icon  style="cursor:pointer" color="#fff" size="16" @click="play(item)"><VideoPlay /></el-icon>
                  </div>
                </div>
                <div class="file-detail f-g">
                  <div class="file-name">{{ item.name }}</div>
                  <div class="file-size">{{ item.size }}</div>
                </div>
                <el-popconfirm title="是否确认删除?" @confirm="deleteFile(item)">
                  <template #reference>
                    <el-icon style="cursor:pointer" color="#D9D9D9" :size="24"><CircleCloseFilled /></el-icon>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="right-card">
          <div class="handle-buttons">
            <el-popover
                placement="bottom"
            >
              <template #reference>
                <el-button  size="mini">
                  算法选择
                  <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                </el-button>
              </template>
              <el-checkbox-group v-model="toolCheckList">
                <el-checkbox v-for="item in toolList" :label="item.name" :value="item.value"></el-checkbox>
              </el-checkbox-group>
            </el-popover>
            <el-button type="primary" size="mini">开始识别</el-button>
          </div>
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="当前识别" name="first">
              <div class="card-body">
                <div class="file-list">
                  <div class="file-item f-r a-c" v-for="item in fileList2" :key="item.id">
                    <div class="file-image">
                      <img :src="item.cover" alt="">
                      <div class="play-icon">
                        <el-icon  style="cursor:pointer" color="#fff" size="16" @click="play(item)"><VideoPlay /></el-icon>
                      </div>
                    </div>
                    <div class="file-detail f-s">
                      <div class="file-name">{{ item.name }}</div>
                      <div class="file-size">{{ item.size }}</div>
                    </div>
                    <div class="file-status f-s">
                      <div class="status-item1" v-if="item.status === 1">识别成功</div>
                      <div class="status-item2" v-if="item.status === 0">识别失败</div>
                    </div>
                    <div class="file-desc f-g">
                      {{ item.desc }}
                    </div>
                    <div class="file-handle f-r a-c">
                      <el-button type="primary" size="mini" @click="againHandle(item)">重新识别</el-button>
                      <el-icon style="cursor:pointer" color="#666" :size="36" @click="copyFile(item)"><CopyDocument /></el-icon>
                      <el-popconfirm title="是否确认删除?" @confirm="deleteFile(item)">
                        <template #reference>
                          <el-icon style="cursor:pointer" color="#666" :size="24"><Delete /></el-icon>
                        </template>
                      </el-popconfirm>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史记录" name="second">
              <div class="card-body">
                <div class="file-list">
                  <div class="file-item f-r a-c" v-for="item in fileList" :key="item.id">
                    <div class="file-image">
                      <img :src="item.cover" alt="">
                      <div class="play-icon">
                        <el-icon  style="cursor:pointer" color="#fff" size="16" @click="play(item)"><VideoPlay /></el-icon>
                      </div>
                    </div>
                    <div class="file-detail f-g">
                      <div class="file-name">{{ item.name }}</div>
                      <div class="file-size">{{ item.size }}</div>
                    </div>
                    <div class="file-status">
                      <div class="status-item1" v-if="item.status === 1">识别成功</div>
                      <div class="status-item2" v-if="item.status === 0">识别失败</div>
                    </div>
                    <div class="file-desc">
                      {{ item.desc }}
                    </div>
                    <div class="file-handle f-r a-c">
                      <el-button type="text">重新识别</el-button>
                      <el-icon style="cursor:pointer" color="#D9D9D9" :size="24"><CopyDocument /></el-icon>
                      <el-popconfirm title="是否确认删除?" @confirm="deleteFile(item)">
                        <template #reference>
                          <el-icon style="cursor:pointer" color="#D9D9D9" :size="24"><Delete /></el-icon>
                        </template>
                      </el-popconfirm>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {ref} from "vue";
import { CircleCloseFilled, VideoPlay, CopyDocument, Delete, ArrowRight } from "@element-plus/icons-vue";
const fileList = ref([
  {
    id: 1,
    cover: require('@/assets/other/file_uav.png'),
    name: '视频名称',
    size: '300kb'
  },
  {
    id: 1,
    cover: require('@/assets/other/file_uav.png'),
    name: '视频名称',
    size: '300kb'
  }
])
const fileList2 = ref([
  {
    id: 1,
    cover: require('@/assets/other/file_uav.png'),
    name: '视频名称',
    size: '300kb',
    status: 1,
    desc: '识别内容识别内容识别内容识别内容识别内容识别内容识别内容识别内容识别内容识别内容'
  },
  {
    id: 1,
    cover: require('@/assets/other/file_uav.png'),
    name: '视频名称',
    size: '300kb',
    status: 0,
    desc: '识别内容识别内容识别内容识别内容识别内容识别内容识别内容识别内容识别内容识别内容'
  }
])

const play = (item) => {
  console.log(item)
}
const deleteFile = (item) => {
  console.log(item)
}
// 重新识别
const againHandle = (item) => {
  console.log(item)
}
// 复制
const copyFile = (item) => {
  console.log(item)
}

const toolCheckList = ref([])
const toolList = ref([
  {
    name: '算法1',
    value: '算法1'
  },
  {
    name: '算法2',
    value: '算法3'
  },
])
/**
 * 右侧
 */
const activeName = ref('first')
</script>

<style lang="scss">
.page {
  height: 100%;
  padding: 16px;
  overflow: auto;
  .left-card {
    height: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    .card-header {
      padding: 20px;
      border-bottom: 1px solid #F2F2F2;
    }
  }
  .card-body {
    padding: 10px 0;
    .file-list {
      .file-item {
        padding: 10px 20px;
        .file-image {
          position: relative;
          margin-right: 16px;
          img {
            width: 88px;
            border-radius: 8px;
          }
          .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
          }
        }
        .file-detail {
          height: 100%;
          .file-name {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            margin-bottom: 6px;
          }
          .file-size {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #CCCCCC;
          }
        }
        .file-status {
          padding: 0 20px;
          width: 160px;
          .status-item1 {
            color: #17BDB2;
          }
          .status-item2 {
            color: #F94C4C;
          }
        }
        .file-desc {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 23px;
          padding-right: 50px;
        }
      }
    }
  }
  .right-card {
    height: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    position: relative;
    .handle-buttons {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 99;
    }
    .file-detail {
      min-width: 180px;
    }
    .el-tabs__active-bar {
      bottom: -17px;
    }
    .el-tabs__item {
      font-size: 16px;
    }
    .el-tabs__header {
      padding-top: 16px;
      margin-bottom: 0;
    }
    .el-tabs__nav-scroll {
      padding: 0 16px;
      overflow: initial;
    }
    .el-tabs__nav-wrap {
      padding-bottom: 17px;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #F2F2F2;
    }
  }
}

</style>